The accelerometer is a built-in structure that manages tilt and motion of a device. It is also capable of detecting rotation and motion gestures such as swinging or shaking.
The most common feature of it is to activate auto screen rotation on mobile devices when the user changes their orientation from landscape to portrait or vice-versa.
Another new application for the accelerometer is to control the mobile device’s music player with gestures such as Sony Ericsson Shake control and Samsung Motion play technologies).
They are also used for enhancing the gaming controls moving right and left by tilting the device instead of tapping keys.
The plugin is also called device-motion. It is used to track device motion in three dimensions.
For using the accelerometer in the app, you need to follow the following steps:
Step 1 - Installing Accelerometer Plugin
Open the command prompt window and type the following code to install this plugin by using cordova-CLI.
C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-device-motion Step 2 - Adding Buttons
Now, you need to add two buttons in index.html file. One will be used for getting current acceleration and the other will watch the changes for acceleration.
<button id = "currentAcceleration">GET ACCELERATION</button>
<button id = "changeAcceleration">WATCH ACCELERATION</button>
Step 3 - Adding Event Listeners
Let's add event listeners for our buttons to onDeviceReady function inside index.js.
document.getElementById("currentAcceleration").addEventListener("click", currentAcceleration);
document.getElementById("changeAcceleration").addEventListener("click", changeAcceleration);
Step 4 – Create Functions
Now, you have to create two functions. First will be used to get the value of present acceleration and the second one will watch acceleration and update in every three seconds. You also have to add clearWatch wrapped by setTimeout function to stop watching acceleration after a specific time period. The frequency parameter is used to trigger the callback function every three seconds.
function currentAcceleration(){
navigator.accelerometer.getCurrentAcceleration(accelerometerSuccess, accelerometerError);
function accelerometerSuccess(acceleration) {
alert('Acceleration X: ' + acceleration.x + '\n' +
'Acceleration Y: ' + acceleration.y + '\n' +
'Acceleration Z: ' + acceleration.z + '\n' +
'Timestamp: ' + acceleration.timestamp + '\n');
};
function accelerometerError() {
alert('onError!');
};
}
function changeAcceleration(){
var accelerometerOptions = {
frequency: 3000
}
var watchID = navigator.accelerometer.watchAcceleration(accelerometerSuccess, accelerometerError, accelerometerOptions);
function accelerometerSuccess(acceleration) {
alert('Acceleration X: ' + acceleration.x + '\n' +
'Acceleration Y: ' + acceleration.y + '\n' +
'Acceleration Z: ' + acceleration.z + '\n' +
'Timestamp: ' + acceleration.timestamp + '\n');
setTimeout(function() {
navigator.accelerometer.clearWatch(watchID);
}, 10000);
};
function accelerometerError() {
alert('onError!');
};
}
Now if you press GET ACCELERATION button, you will get the current value of acceleration. If you press WATCH ACCELERATION the alert will be fired every three seconds. After next alert is shown the clearWatch function will be called and no more alerts will be shown as the timeout is set to 10000 milliseconds.
Leave Comment